<template>
  <div class="">
    <input type="text" @change="changeEvent" ref="inputRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
const changeEvent = (e: Event) => {
  // console.log(e.target as HTMLInputElement)
  // 如果event转换不支持，那么就把目标转成具体的dom类型
  const value = (e.target as HTMLInputElement).value
  console.log(value)

  // 如果将来工作中，实在不知道它是啥类型，咋们暂时就用any
  // console.log(e.target.value)
}

// const inputRef = ref()

const inputRef = ref<HTMLInputElement | null>(null)
onMounted(() => {
  // const aaa = inputRef.value as HTMLInputElement
  // aaa.focus()
  // 可选链操作符（es6的语法），什么时候加当你的值有可能为空
  // inputRef.value?.focus ,它的意思是，如果 inputRef.value 为空，后面不再.，如果不为空再.focus
  inputRef.value?.focus()
  // if (inputRef.value) {
  //   inputRef.value.focus()
  // }

  // 赋值操作（赋值的时候，一定要拿到dom节点才行）
  // !代表前面一定不为空（非空断言）
  // 非空断言，比较危险，一定要确保 !前面的内容不为空，为空就报错
  // inputRef.value!.value = '123'
  // if判断会更安全一些
  if (inputRef.value) {
    inputRef.value.value = '456'
  }
})
</script>

<style scoped></style>
